import React, { useEffect, useState } from 'react';
import { Button, Card, Form, Table, Input } from 'antd';
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
import { roleListDataAPI } from '@/api/rolelist';

interface RoleList {
  id?: string;
  name?: string;
  desc?: string;
  createAt?: string;
  updateAt?: string;
  permissionOnRoles?: permissionOnRoles[];
}
interface permissionOnRoles {
  id?: string;
  roleId?: string;
  permissionId?: string;
  createdAt?: string;
  updatedAt?: string;
}

//角色列表页面
const Rolelist: React.FC = () => {
  //表格数据
  const [list, setList] = useState<RoleList[]>([]);
  useEffect(() => {
    roleListDataAPI({}).then((res) => {
      setList(res.data.list);
    });
  }, []);

  return (
    <Card
      title='角色列表'
      extra={
        <>
          <Button icon={<PlusOutlined />} type='primary' />
        </>
      }
    >
      <Form layout='inline'>
        <Form.Item label='角色名称' name={name}>
          <Input placeholder='请输入角色名称' />
        </Form.Item>
        <Form.Item>
          <Button type='primary' icon={<SearchOutlined />} htmlType='submit' />
        </Form.Item>
      </Form>
      <Table
        bordered={true} //是否展示外边框和列边框
        rowKey={'id'}
        columns={[
          {
            title: '序号',
            width: 120,
            align: 'center',
            render: (text, record, index) => {
              return index + 1;
            },
          },
          {
            title: '名字',
            dataIndex: 'name',
            width: 120,
            align: 'center',
          },
          {
            title: '描述',
            dataIndex: 'desc',
            align: 'center',
            render: (text) => {
              return text || '--';
            },
          },

          {
            title: '操作',
            width: 240,
            render: (text, record) => {
              return (
                <>
                  <Button type='primary'>编辑</Button>
                  <Button type='primary' danger>
                    删除
                  </Button>
                </>
              );
            },
          },
        ]} //表格列的配置描述
        dataSource={list} //数据数组
      ></Table>
    </Card>
  );
};

export default Rolelist;
